<template>
  <div v-show="visible">
    <div class="grid_cont">
      <div style="display: flex">
        <div style="width: 3px; height: 18px; background-color: rgba(204, 53, 47, 1)"></div>
        <div style="margin-left: 10px; font-size: 16px; line-height: 16px">{{
          formParams.title
        }}</div>
      </div>
      <div
        style="
          width: 100%;
          height: 1px;
          background-color: rgba(245, 245, 245, 1);
          margin-top: 16px;
          margin-bottom: 30px;
        "
      >
      </div>
      <el-form
        :model="formParams"
        ref="formRef"
        :rules="rules"
        style="margin-left: 14px; text-align: right"
        label-width="126px"
      >
        <el-form-item required label="标题：" prop="topic">
          <el-input v-model="formParams.topic" style="max-width: 588px" />
        </el-form-item>
        <el-form-item required label="图片：" prop="attachmentUrl">
          <UploadImg v-model="formParams.attachmentUrl" :limit="1" width="214px" height="63px" />
        </el-form-item>
        <el-form-item label="跳转到内容：" prop="contentType">
          <el-button :class="{ editBtn: showEdit }" @click="handleEdit">自主编辑</el-button>
          <el-button :class="{ editBtn: showLink }" @click="handleLink">外部链接</el-button>
        </el-form-item>
        <el-form-item v-if="showLink" label="链接地址：" prop="linkAddr">
          <el-input v-model="formParams.linkAddr" style="max-width: 588px" />
        </el-form-item>
        <el-form-item v-if="showEdit" label="文章来源：" prop="contentSource">
          <el-input v-model="formParams.contentSource" style="max-width: 588px" />
        </el-form-item>
        <el-form-item required v-if="showEdit" label="活动介绍：" prop="content">
          <div style="max-width: 586px; text-align: left">
            <div class="introducestyle">
              <Editor
                v-model="formParams.content"
                style="max-width: 586px"
                :editor-config="editorConfig"
              />
            </div>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div class="grid_cont2">
      <el-button
        class="grid_btn"
        @click="swiperCancel"
        style="
          background-color: rgba(255, 255, 255, 1);
          border: 1px solid rgba(187, 187, 187, 1);
          color: rgba(142, 142, 142, 1);
        "
        >取消</el-button
      >
      <el-button
        class="grid_btn"
        @click="swiperSure"
        style="background-color: #ff9900; border: 1px solid #ff9900; color: #fff"
        >确定</el-button
      >
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import type { UploadProps } from 'element-plus'
import * as getSwiperApi from '@/api/appManagement/swiperManagement/index'
const showEdit = ref(true)
const showLink = ref(false)
const editorConfig = ref({
  placeholder: '',
  MENU_CONF: {}
})
const formParams = reactive({
  topic: '',
  attachmentUrl: '',
  contentType: '自主编辑',
  contentSource: '',
  content: '',
  carouselImageType: '',
  title: '',
  linkAddr: ''
})
// 自主编辑
const handleEdit = () => {
  showEdit.value = true
  showLink.value = false
  formParams.contentType = '自主编辑'
}
// 外部链接
const handleLink = () => {
  showEdit.value = false
  showLink.value = true
  formParams.contentType = '外部链接'
}

const formRef = ref() // 搜索的表单
const rules = reactive({
  carouselImageType: [{ required: true, message: '新增类型不能为空！', trigger: 'blur' }],
  topic: [{ required: true, message: '主题不能为空！', trigger: 'blur' }],
  attachmentUrl: [{ required: true, message: '图片不能为空！', trigger: 'blur' }],
  content: [
    {
      type: 'paragraph',
      required: true,
      validator: (rule, value, callback) => {
        // 你的自定义验证逻辑
        if (!value) {
          callback(new Error('活动介绍不能为空'))
        } else {
          let str = value
            .replace(/<[^<p>]+>/g, '')
            .replace(/<[</p>$]+>/g, '')
            .replace(/&nbsp;/gi, '')
            .replace(/<[^<br/>]+>/g, '')
            .replace(/\s+/g, '')
          if (str.length === 0) {
            callback(new Error('请填写活动介绍'))
          } else {
            callback()
          }
        }
      },
      trigger: 'blur'
    }
  ]
})
const visible = ref(false)
const props = defineProps({
  addShow: {
    type: Boolean,
    default: false
  },
  editData: {
    type: Object
  }
})
const emit = defineEmits(['getaddShow', 'geteditData'])
watch(
  () => props.addShow,
  (val) => {
    visible.value = val
  },
  { immediate: true }
)
watch(
  () => props.editData,
  (val) => {
    if (val) {
      formParams.topic = val.topic
      formParams.attachmentUrl = val.attachmentUrl
      formParams.contentSource = val.contentSource
      formParams.content = val.content
      formParams.carouselImageType = val.carouselImageType
      formParams.title = val.dialogtitle
      formParams.linkAddr = val.linkAddr
      if (val.dialogtitle === '编辑图文') {
        if (val.contentType == '自主编辑') {
          showEdit.value = true
          showLink.value = false
        } else {
          showEdit.value = false
          showLink.value = true
        }
      }
    }
  },
  { immediate: true }
)
/** 取消按钮操作 */
const swiperCancel = () => {
  visible.value = false
  emit('getaddShow', visible.value)
  emit('geteditData', props.editData.pageNo)
}
/** 确定按钮操作 */
const swiperSure = async () => {
  await formRef.value.validate()
  const ActivityData = {
    topic: formParams.topic,
    attachmentUrl: formParams.attachmentUrl,
    contentType: formParams.contentType,
    contentSource: formParams.contentSource || '',
    content: formParams.content || '',
    carouselImageType: formParams.carouselImageType,
    linkAddr: formParams.linkAddr
  }
  if (formParams.topic && formParams.attachmentUrl) {
    if (formParams.title === '新增图文') {
      ElMessageBox.confirm('是否确认新增图文?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          getSwiperApi.createSwiper(ActivityData).then((res) => {
            if (res) {
              ElMessage.success('新增成功！')
              emit('geteditData', props.editData.pageNo)
              visible.value = false
              emit('getaddShow', visible.value)
            }
          })
        })
        .catch(() => {
          ElMessage.info('已取消新增图文')
        })
    }
    if (formParams.title === '编辑图文') {
      ElMessageBox.confirm('是否确认编辑图文?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          ActivityData.id = props.editData.id
          getSwiperApi.updateSwiper(ActivityData).then((res) => {
            if (res) {
              ElMessage.success('修改成功！')
              emit('geteditData', props.editData.pageNo)
              visible.value = false
              emit('getaddShow', visible.value)
            }
          })
        })
        .catch(() => {
          ElMessage.info('已取消编辑图文')
        })
    }
  } else {
    ElMessage.warning('星号为必填项不能为空！')
  }
}
</script>
<style scoped>
.grid_cont {
  min-height: 600px;
  background: #fff;
  padding: 16px;
}

.grid_cont2 {
  width: 100%;
  background: #fff;
  padding: 16px;
  height: 65px;
  justify-content: center;
  align-items: center;
  display: flex;
  padding: 0;
  box-shadow: 0px -2px 6px 0px rgba(188, 188, 188, 0.65);
}

.grid_btn {
  width: 80px;
  height: 30px;
}

.grid_btn:hover {
  opacity: 0.8;
}

::v-deep .el-radio__input.is-checked .el-radio__inner {
  border-color: #cc352f !important;
  background-color: #cc352f !important;
}

::v-deep .el-radio__inner:hover {
  border-color: #cc352f !important;
}

::v-deep .el-radio__input.is-checked + .el-radio__label {
  color: #cc352f !important;
}

::v-deep .el-cascader .el-input.is-focus .el-input__wrapper {
  box-shadow: 0 0 0 1px #cc352f !important;
}

.introducestyle {
  box-shadow: 0 0 0 1px var(--el-disabled-border-color);
  border-radius: 4px;
  background: transparent !important;
}

.introducestyle:hover {
  box-shadow: 0 0 0 1px #ccc !important;
}

.introducestyle::selection {
  box-shadow: 0 0 0 1px #cc352f !important;
}

::v-deep .w-e-text-placeholder {
  top: 10px;
  text-align: justify;
  width: 96%;
}
.el-button {
  width: 80px;
  height: 30px;
}
.el-button:hover {
  width: 80px;
  height: 30px;
  color: #fff;
  background: #ea4f11;
  border: 0;
}
.editBtn {
  color: #fff;
  background: #ea4f11;
  border: 0;
}
</style>
